<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../demo/demo.css">
    <script src="../jq/jquery-1.12.4.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab-content">
            <ul>
                <li>时事</li>
                <li>体育</li>
                <li>娱乐</li>
            </ul>
        </div>
        <!-- 内容 -->
        <div class="content">
            <p>时事时事时事时事时事时事时事时事时事时事时事时事时事时事时事时事</p>
           <p>体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育</p> 
            <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
        </div>
    </div>
</body>
<script type="text/javascript">
    $(function () {
        // $('.content p').eq(1).hide();
        // $('.content p').eq(2).hide();

        // gt()选取序列大于0的元素
        // eq()匹配给定索引值的元素
        $('.content p:gt(0)').hide();
        $('li').click(function () {
            // 选项卡切换样式
            $(this).addClass('block').siblings('li').removeClass('block')
            // 获取序列号
            var index = $(this).index();
            // 匹配给定索引值的元素
            $('p').eq(index).show().siblings().hide();
        })
        $('.tab-first').eq(0).show();
    })

</script>

</html>